<template>
  <!-- 内容 -->
  <div class="main" id="homeMain">
    <!-- 左区单夹 -->
    <div class="leftNew">
      <slot name="leftNew">
        <!-- <div class="item"></div> -->
      </slot>
    </div>
    <!-- 左区 -->
    <div class="left">
      <slot name="left">
        <!-- <div class="item"></div> -->
      </slot>
    </div>
    <!-- 右区 -->
    <div class="right" :style="{ width: rightWidth }">
      <slot name="right">
        <!-- <div class="item"></div> -->
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "LayoutCol",
  props: {
    rightWidth: {
      type: String,
      default: "528px",
    },
  },
};
</script>

<style lang="stylus" scope>
@import '~styles/theme.styl';

// 核心
.main {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: calc(100vw - 400px);
  max-width: 1840px;

  // 左区
  .left {
    .item {
      padding: 20px;
      max-width: 1044px;
      min-width: 450px;
      max-height: 100%;
      background: var(--div);
      border-radius: 10px;
      box-shadow: 0 1px 30px -4px var(--shadow);
      transition: all 0.5s;

      &:hover {
        box-shadow: 0 0px 30px -3px rgba(102, 102, 102, 0.7);
      }
    }
  }

  // 右区
  .right {
    .item {
      padding: 10px;
      margin: 0 auto 15px auto;
      background: var(--div);
      border-radius: 10px;
      box-shadow: 0 1px 30px -4px var(--transparentDiv);
      transition: all 0.5s;
      box-sizing: border-box;
      box-shadow: 0 1px 15px -4px var(--shadow);

      &:hover {
        box-shadow: 0 0px 30px -3px rgba(102, 102, 102, 0.7);
      }
    }
  }

  .leftNew {
    margin: 30px;

    .item {
      padding: 10px;
      margin: 0 auto 15px auto;
      width: 288px;
      background: var(--div);
      border-radius: 10px;
      box-shadow: 0 1px 30px -4px var(--transparentDiv);
      transition: all 0.5s;
      box-sizing: border-box;
      box-shadow: 0 1px 15px -4px var(--shadow);

      &:hover {
        box-shadow: 0 0px 30px -3px rgba(102, 102, 102, 0.7);
      }
    }
  }
}
</style>
